import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import routes from "./router";
import { Mask, SpinLoading } from "antd-mobile";
import { useSelector } from "react-redux";

const App = () => {

  return (
    <div>
      <RouterProvider router={createBrowserRouter(routes)}></RouterProvider>
      <MaskK></MaskK>
    </div>
  );
};

const MaskK = () => {
  const loading = useSelector((state) => state.loading.loading);
  return (
    <Mask
      style={{
        display: loading ? "flex" : "none",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <SpinLoading></SpinLoading>
      <span>数据加载中</span>
    </Mask>
  );
};

export default App;
